<template>
  <el-aside :width="'256'" :collapsed-width="64" class="left">
    <div class="logo" v-if="!collapse">
      <img src="../assets/logo.png" alt="" class="logoImg" />
      <span>嘻U后台系统</span>
    </div>
    <div class="logo" v-if="collapse">
      <img src="../assets/logo.png" alt="" class="logoImg" />
    </div>
    <div class="asideMenu">
      <el-menu :default-active="activeIndex" :collapse="collapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" class="el-menu-vertical-demo" @select="handleSelectMenu">
        <el-menu-item index="home">
          <i class="el-icon-price-tag"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="components">
          <template slot="title">
            <i class="el-icon-s-grid"></i>
            <span>组件管理</span>
          </template>
          <el-menu-item index="biaodan_list">表单管理</el-menu-item>
          <el-menu-item index="list2_list">列表管理</el-menu-item>
          <el-menu-item index="tree_list">Tree管理</el-menu-item>
        </el-submenu>
        <el-submenu index="tubiao">
          <template slot="title">
            <i class="el-icon-s-data"></i>
            <span>图表管理</span>
          </template>
          <el-menu-item index="tubiao_list">echars管理</el-menu-item>
        </el-submenu>
        <el-submenu index="excel">
          <template slot="title">
            <i class="el-icon-s-data"></i>
            <span>表格管理</span>
          </template>
          <el-menu-item index="excel_list">excel管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      // 默认高亮
      activeIndex: 'home'
    }
  },
  computed: {
    collapse() {
      return this.$store.state.isCollapse
    }
  },
  // 刷新的时候会触发
  mounted() {
    this.activeIndex = localStorage.getItem('menu_activeIndex') || 'home'
  },
  methods: {
    // 处理菜单选择事件
    handleSelectMenu(item, itemPath) {
      // console.log(item);
      // 将菜单的激活项保存起来
      this.activeIndex = item
      localStorage.setItem('menu_activeIndex', this.activeIndex)
      this.$router.push({
        path: `/index/${item}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-aside {
  background-color: #545c64;
  .logo {
    height: 60px;
    background: #545c64;
    display: flex;
    justify-content: center;
    align-items: center;
    .logoImg {
      width: 25px;
      height: 25px;
      margin-right: 8px;
    }
    > span {
      color: #fff;
      font-size: 18px;
    }
  }
  .asideMenu {
    background: #545c64;
    /deep/ .el-menu {
      border-right: none;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
  }
}
</style>
